<template>
  <div class="app-container">
    <el-form :model="param" :inline="true" label-width="68px">
      <el-form-item style="width:400px"> 
        <InputBox :title="'出发/到达城市'" :inputVal1="param.boxStartCity" :inputVal2="param.boxBackCity" :inputBoxConfig="inputBoxConfig"  @inputChange="inputChange"></InputBox>
      </el-form-item>

      <el-form-item style="width:300px">
        <div>箱型</div>
        <el-select v-model="param.boxType" style="width:100%" placeholder="选择箱型">
          <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:300px">
        <div>箱况</div>
        <el-select v-model="param.boxCondition" style="width:100%" placeholder="选择箱况">
          <el-option v-for="item in param.boxConditions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item style="width:300px">
        <div>带箱人</div>
        <el-input v-model.trim="param.personBox"></el-input>
      </el-form-item> -->
      <el-form-item style="width:300px">
        <div>租箱编号</div>
        <el-input v-model.trim="param.releaseNo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Refresh" @click="handleReSet" style="margin-top: 30px">重置</el-button>
        <el-button :icon="Search" type="primary" @click="getTableData" style="margin-top: 30px">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- <CardBox v-bind="table" @handleXiadan="handleXiadan" @handleChakan="handleChakan" @handleZixun="handleZixun" @pageChange="onTablePageChange"></CardBox> -->
    <div style="margin-top: 15px;">
      <cardRentBox v-for="(item,index) in table.data" :roleType="'xdjk'" :key="index" :cardData="item"  :userId="param.companyId" @handleXiaDan="handleXiaDan(item)" @handleChakan="handleChakan(item)" :componentCallSource="'xdjk'" style="float:left;">
      </cardRentBox>
    </div>
    <div class="clearFix"></div>
    <el-empty description="当前暂无广告数据" v-if="table.data.length==0" />
    <el-row style="margin-top: 10px;display: flex;justify-content: flex-end; " v-if="table.data.length>0">
      <el-pagination current-page="param.pageNum" page-size="param.pageSize" :pager-count="5"
        :page-sizes="[10, 20, 50, 100]" :total="table.config.total" background
        layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange" />
    </el-row>
    <!-- dialog -->
    <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
      <span>确认删除该用户？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="activDelete">是的</el-button>
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>
        您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">
            企业实名认证
          </el-button>
        </div>
      </template>
    </el-dialog> -->


  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table'
import cardRentBox from '@/components/cardRentBox'
// import  CardBox from '@/components/cardBox'
import { getTable } from '@/api/boxServer'
import { getBoxEastAgentTable } from '@/api/boxCallBack'
import citySelect from '@/components/citySelect'
import useUserStore from '@/store/modules/user'
import { computed, onActivated, onMounted, reactive, ref } from 'vue';
import {
  Plus,
  Delete,
  Edit,
  Message,
  Download,
  Upload
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import InputBox from '@/components/inputBox'
import { Search, Refresh } from '@element-plus/icons-vue'
const userStore = useUserStore()

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  dialogVisible: false,
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' },
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxConditions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '20', label: '混提(次新或者适货)', },
    { value: '5', label: '全新', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: [],
  boxStartCity: [],
  startCityOptions: [],
  backCityOptions: [],
  typeList: [],
  centerDialogVisible: false,
  releaseNo:'',
  personBox:''
});

const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    // { key: 'releaseRentId', colWidth: '220', title: 'releaseRentId', type: 'text', isCheck: true },
    { key: 'imgUrl', colWidth: '100', title: '集装箱展示', type: 'image', width: 80, height: 80, isCheck: true },
    { key: 'carryCityName', colWidth: '160', title: '出发城市', type: 'text', isCheck: true },
    { key: 'returnCityName', colWidth: '160', title: '到达城市', type: 'text', isCheck: true },
    // { key: 'unitPrice', colWidth: '120', title: '箱贴单价', type: 'add', before: '￥', isCheck: true },
    { key: 'boxUsagePeriod', colWidth: '120', title: '箱使期', type: 'add', after: '天', isCheck: true },
    // { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    // { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }, isCheck: true },
    { key: 'totalInventoryQty', colWidth: '120', title: '回调箱量', type: 'add', after: '个', isCheck: true },
    {
      key: 'operate',
      colWidth: '200',
      title: '',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          name: '咨询',
          // icon: 'Edit',
          // content: "咨询",
          command: 'handleZixun',
        },
        {
          name: '下单',
          command: 'handleXiaDan',
          isShow: (row: any) => {
            return row.companyId != param.companyId; // 1
          },
        },
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

// 城市id回写
const startCityId = (id: string) => {
  param.boxStartCity = id
}
const backCityId = (id: string) => {
  param.boxBackCity = id
}

async function getTableData() {
  let data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityIds: param.boxStartCity,
    returnCityIds: param.boxBackCity,
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    releaseNo:param.releaseNo,
    // personBox:param.personBox

  };
  table.config.loading = true;
  // 获取列表数据
  getBoxEastAgentTable(data).then((res: any) => {
    // console.log(JSON.parse(JSON.stringify(res.data.list)))
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.data.forEach((item: any) => {
      let mainFileList = JSON.parse(item.mainFileList);
      item.imgUrl = mainFileList.map((item: any) => {
        return item.url
      })[0];
      // let carryCity = JSON.parse(item.carryCity);
      item.carryCityName = formatCity(item.carryCity,'cityName')
      // item.carryCountryName = formatCity(item.carryCity,'countryName')
      item.returnCityName = formatCity(item.returnCity,'cityName')
      // item.returnCountryName = formatCity(item.returnCity,'countryName')
      item.boxType=item.releaseCallbackPriceList[0].boxType
      item.boxCondition=item.releaseCallbackPriceList[0].boxCondition
      item.inventory=item.releaseCallbackPriceList[0].inventory
      item.currency=item.releaseCallbackPriceList[0].currency
      item.unitPrice=item.releaseCallbackPriceList[0].unitPrice




    });
    console.log('table.data',table.data)
    table.config.total = res.data.total;
  });
  table.config.loading = false;
  //userId
  const user = await userStore.getUser()
  param.companyId = user.companyId
  // console.log(param)
}
//重置
function handleReSet() {
  param.boxStartCity = null
  param.boxBackCity = null
  param.boxType = null
  param.boxCondition = null
  param.personBox = null
  param.releaseNo = null
  getTableData()
}

function formatCity(cityList,type) {
  cityList = JSON.parse(cityList);
  let cityName = ''
  cityList.map((item: any, index: number) => {
    if(item.cityName){
       cityName = cityName + (index == 0 ? '' : '/') + item.cityName
    }
  })
  return cityName
}
// const goAuthenticate = () => {
//   router.push('/enterpriseManage/realAuthentication')
//   param.centerDialogVisible = false
// }
//转 下单
const router = useRouter();
const handleXiaDan = (row: any) => {
     router.push({
      path:'huiDiaoBoxInfo',
      query:{
          orderId: row.id
      }
  })
};

//转 详情
const handleChakan = (row: any) => {
      router.push({
      path:'huiDiaoBoxInfo',
      query:{
          orderId: row.id
      }
  })

};
//转 咨询
const handleZixun = (row: any) => {
  console.log('row',row)
  if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
    param.centerDialogVisible = true
  } else {
    console.log('zixun')
  }

};
//删除 
const tableRef = ref({ multipleSelection: [] })
const selection = ref()
const activDelete = () => {
  let ids = [...selection.value]
  // deletePitch(ids).then((res: any) => {
  //   getTableData()
  // })
  param.dialogVisible = false;
};
// 分页数量
const onHandleSizeChange = (val: number) => {
  param.pageSize = val;
  getTableData()
};
const onHandleCurrentChange = (val: number) => {
  param.pageNum = val;
  getTableData()
};
//分页
function onTablePageChange(page: { pageNum: number; pageSize: number }) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};

onActivated(() => {
  getTableData()

})


//修改提还箱城市
const inputChange = (val1,val2) => {
  param.boxStartCity = val1 // 提箱城市
  param.boxBackCity = val2 //还箱城市
}
const inputBoxConfig = reactive({
  placeholder1:"请输入出发城市",
  placeholder2:"请输入到达城市",
  multiple:true
})
</script>